<template>
  <div class="setting-basic">
    <div class="setting-basic-title">其它设置</div>
    <div class="setting-basic-rule">
      <div class="setting-basic-rule-item">
        <div class="setting-basic-rule-item-title">门户访问权限:</div>
        <el-radio-group
          v-model="setData.serviceStationConfig.loginValidate"
          @change="change($event, 'loginValidate')"
        >
          <div class="mar-b-12">
            <el-radio class="mar-r-16" :label="false"
            >所有用户均可访问</el-radio
            >
          </div>
          <div>
            <el-radio :label="true"
            >仅允许客户联系人的手机号/邮箱访问</el-radio
            >
          </div>
        </el-radio-group>
      </div>

      <div class="setting-basic-rule-item">
        <div class="setting-basic-rule-item-title">登录验证方式：</div>
        <el-radio-group
          v-model="setData.serviceStationConfig.validateBySms"
          @change="change($event, 'validateBySms')"
        >
          <div class="mar-b-12">
            <el-radio class="mar-r-16" :label="true"
            >短信/邮箱验证码（推荐）</el-radio
            >
          </div>
          <div>
            <el-radio :label="false">图形验证码</el-radio>
          </div>
        </el-radio-group>
      </div>

      <div class="setting-basic-rule-item">
        <div class="setting-basic-rule-item-title">服务事件查看范围：</div>
        <el-radio-group
          v-model="setData.serviceStationConfig.showAllEvent"
          @change="change($event, 'showAllEvent')"
        >
          <div class="mar-b-12">
            <el-radio class="mar-r-16" :label="false"
            >仅显示用户在线提交的服务事件</el-radio
            >
          </div>
          <div>
            <el-radio :label="true" class="mar-r-6"
            >显示所有与该用户相关的服务事件</el-radio
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="与该用户相关的服务事件包括：“用户通过门户在线提交的服务事件”与“企业员工在售后宝系统中创建的该用户的服务事件”"
              placement="bottom"
            >
              <i class="iconfont icon-info mar-l-6 color-999 cur-point"></i>
            </el-tooltip>
          </div>
        </el-radio-group>
      </div>

      <div class="setting-basic-rule-item">
        <div class="setting-basic-rule-item-title">服务事件取消规则：</div>
        <div class="flex-x">
          <el-switch
            v-model="setData.serviceStationConfig.eventCancel"
            @change="change($event, 'eventCancel')"
          >
          </el-switch>
          <div class="mar-l-10">允许用户从自助门户取消尚未完成的服务事件</div>
        </div>
      </div>

      <div class="setting-basic-rule-item">
        <div class="setting-basic-rule-item-title">商城发布范围：</div>
        <el-radio-group
          v-model="setData.serviceStationConfig.showAllItem"
          @change="change($event, 'showAllItem')"
        >
          <div class="mar-b-12">
            <el-radio class="mar-r-16" :label="false">
              仅展示发布状态的备件和服务项目
            </el-radio>
          </div>
          <div>
            <el-radio :label="true">发布全部备件和服务项目</el-radio>
          </div>
        </el-radio-group>
        <div>
          <el-button class="mar-t-10" type="primary" @click="goToShopCenter">
            进入商城
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/** vue */
import { reactive, toRefs, onMounted } from 'vue';
import { Message } from 'element-ui';
/** api */
import { getRules, saveRules } from '@src/api/LinkcApi';
import Platform from '@src/platform';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: 'setting-basic',
  setup() {
    const state = reactive({
      setData: {
        serviceStationConfig: {},
      },
    });

    const goToShopCenter = () => {
      // Platform.openTab({
      //   id: 'PORTAL_MALL', 
      //   title: '商城管理', 
      //   url: '/setting/serviceStation/partShop'
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageLinkcGoodsList,
      })
    };
    const getSetData = async () => {
      const { status, data, message } = await getRules();
      if (status === 200) {
        state.setData.serviceStationConfig = data.serviceStationConfig;
      } else {
        Message.error(message);
      }
    };

    const change = async (e, key) => {
      const params = {
        type: key,
        state: e,
      };
      const { status } = await saveRules(params);
      if (status != 200) {
        Message.error('修改失败');
        getSetData();
      }
    };

    onMounted(() => {
      getSetData();
    });

    return {
      ...toRefs(state),
      change,
      goToShopCenter,
    };
  },
};
</script>
<style lang="scss" scoped>
// @import url('@src/modules/linkc/assets/public.scss');

.el-radio {
  font-weight: 400;
}

.el-switch__label {
  font-weight: 400;
}

.color-primary {
  @include fontColor();
}

.color-999 {
  color: #999;
}

.el-dialog__body {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding-top: 12px;
  padding-bottom: 0;
}

.setting-basic {
  width: 100%;

  &-title {
    height: 46px;
    font-weight: bold;
    font-size: 16px;
  }

  &-rule {

    &-item {
      margin-bottom: 20px;

      &-title {
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
}
</style>